<template>
  <view class="exchangeRecord">
    <view class="head">
      <image src="../../static/images/BackIcon.png" mode="aspectFill" @click="handleExchange"/>
      <view class="title">兑换记录</view>
    </view>

    <view class="middle">
      <image src="../../static/WoDEMingXiBg.png" mode="aspectFill" />
      <view class="middle-item">
        <view class="left">
          <image src="../../static/MorenTx.png" mode="aspectFill" />
          <view style="margin-top: 10rpx;">用户名125487</view>
          <view>ID:875896</view>
        </view>
        <view class="right">
          <view class="right-option">
            <view class="option">转让</view>
            <view class="option">换茶票</view>
            <view class="option">换茶票</view>
          </view>
          <view class="scoreName">
            <view class="right-scoreName">
              <view>订购积分</view>
              <view style="margin-top: 10rpx;">58745424.00</view>
            </view>
            <view class="right-scoreName">
              <view>订购积分</view>
              <view style="margin-top: 10rpx;">58745424.00</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="top">
        <view>订购积分类型:</view>
        <!-- 自定义样式的下拉按钮 -->
        <view class="dropdown-btn">
          <uni-data-select
            v-model="selectValue"
            :localdata="range"
            @change="onChange"
            placeholder="全部"

          />
        </view>
        <view class="dropdown-btn">
          <uni-data-select
            v-model="selectValue"
            :localdata="range"
            @change="onChange"
            placeholder="本月"
           
          />
        </view>
      </view>
      <view class="record">
       <image
        src="../../static/images/WoDEIcon07.png"
        mode="aspectFill"
        class="img"
       />
        <view class="code">
          <view>xxxxxxxxxxxxxxxxxxxx</view>
           <view>xxxxxxxxxxxxxxxxxxxx</view>
           <view class="code-item">记录编号:13874547</view>
           <view class="code-item">2025-08-1518:58:52</view>
        </view>
         <view class="score">
       <view>+588</view>
        <view style="color:#9f1818;margin-top: 20rpx;">审核中</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import uniDataSelect from '@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
import { ref } from 'vue'
const handleExchange = () => {
  uni.navigateBack()
}
const selectValue = ref('') // 默认选中 "全部"

const range = [
  { value: 'all', text: '全部' },
  { value: 'month', text: '本月' },
  { value: 'week', text: '本周' }
]

const onChange = (item) => {
  console.log('选择:', item.text)
  selectValue.value = item.value
}
</script>

<style lang="scss" scoped>
.exchangeRecord {
  .head {
    width: 100%;
    height: 155rpx;
    background: #5756b3;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    position: relative;

    image {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
    }

    .title {
      font-size: 50rpx;
      flex: 1;
      text-align: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .middle {
    width: calc(100% - 40rpx);
    margin: 20rpx;
    height: 250rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .middle-item {
      width: 100%;
      position: absolute;
      top: 36rpx;
      left: 0;
      display: flex;
      justify-content: space-around;

      .left {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 30rpx;
        }
      }

      .right {
        .right-option {
          height: 50rpx;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .option {
            width: 130rpx;
            height: 100%;
            background:#6b3408;
            color: #b67d4a;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10rpx;
            font-size: 24rpx;
          }
        }

        .scoreName {
          display: flex;
          align-items: center;

          .right-scoreName {
            margin-top: 55rpx;
            text-align: center;
            margin-left: 20rpx;

            view:first-child {
              font-size: 24rpx;

            }

            view:last-child {
              font-size: 32rpx;
            }
          }
        }
      }
    }

   
  }
   .content {
      margin-top: 40rpx;
      width: calc(100% - 80rpx);
      padding: 0 40rpx;

      .top {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #333;
        gap: 20rpx;

        .dropdown-btn {
width: 120rpx;
background: orange;
height: 70rpx;
border-radius: 30rpx;
        }
      }
      .record{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
       width: 100%;
       padding-bottom: 20rpx;
       border-bottom: 1px solid #d6d3d3;
       .img{
         width: 50rpx;
         height: 50rpx;
         border-radius: 30rpx;
        }
        .code{
        margin-left: 40rpx;
        .code-item{
        color: #d1cccc;
        font-size: 20rpx;
        }
        }
        .score{
          width: 275rpx;
          text-align: right;
        }
      }
    }
}
</style>